<template>
    <div>
        <headers title="分类"></headers>
        <van-row>
            <van-col span="6" style="overflow: auto;">
                <van-sidebar v-model="active" >
                    <van-sidebar-item title="电视" />
                    <van-sidebar-item title="移动电源" />
                    <van-sidebar-item title="数据线" />
                    <van-sidebar-item title="蓝牙耳机" />
                    <van-sidebar-item title="笔记本电池" />
                    <van-sidebar-item title="手机" />
                </van-sidebar>
            </van-col>
            <van-col span="17" style="overflow: auto;">
                <div>
                    <van-search v-model="value" placeholder="请输入搜索关键词" />
                    <template v-if="lists.length > 0">
                        <van-card v-for="(v, i) in lists" :key="i" :price="v.goods_price" :title="v.goods_name"
                            thumb="">
                            <template #thumb>
                                <div style="display: flex; align-items: center;justify-content: center;">
                                    <van-checkbox v-model="v.checked"></van-checkbox>
                                    <img :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                        alt="" srcset="" style="width: 6rem;height: 6rem;">
                                </div>
                            </template>
                            <template #footer>
                                <van-stepper v-model="v.num" />
                                <van-button size="mini" @click="delFun(i)">删除</van-button>
                            </template>
                        </van-card>

                    </template>
                    <template v-else>
                        <van-empty description="暂无数据" />
                    </template>
                    <van-submit-bar :price="price * 100" button-text="提交订单" @submit="onSubmit" v-if="isShow">
                        <van-checkbox v-model="checkedAll">全选</van-checkbox>
                    </van-submit-bar>
                    <van-submit-bar :price="price * 100" button-text="提交订单" disabled @submit="onSubmit" v-else
                        style="background: #eee;">
                        <van-checkbox v-model="checkedAll">全选</van-checkbox>
                    </van-submit-bar>
                </div>
            </van-col>
        </van-row>
    </div>
</template>

<script setup>
import headers from '@/components/headers.vue';
import { ref, watch, computed } from 'vue';
import { categoriesApi } from '@/api/api';
import _ from 'lodash'
const active = ref('');
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
const value = ref('');
let lists = ref([])
const getlists = () => {
    lists.value = store.shoplist
}
getlists()
const delFun = (i) => {
    lists.value.splice(i, 1)
}
const checkedAll = computed(() => {
    return lists.value.every((v) => v.checked == true)
})

const price = computed(() => {
    let sum = 0
    lists.value.forEach((v) => {
        sum += v.goods_price * v.num
    })

    return sum
})
let isShow = ref(true)
const onSubmit = () => {
    let arr = lists.value.filter((v) => v.checked == true)
    if (arr.length > 0) {
        isShow.value = true
    } else {
        isShow.value = false
    }
}
watch(value, _.debounce((newValue, oldValue) => {
    // 在嵌套的属性变更时触发
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // 因为它们是同一个对象！
}), 1000)


</script>

<style lang="scss" scoped>
.box {
    display: flex;
    flex-direction: column;

    .van-row {
        flex: 1;
        overflow: auto;
    }
}
</style>